3-2 方案一：使用可视化界面创建uniapp项目
创建项目
- 打开 HBuilderX，点击 文件 -> 新建 -> 项目
- 选择 uni-app 项目类型
- 填写项目名称（如
community-weixin-app） - 选择模板：
| 模板 | 说明 |
|---|---|
| 默认模板 | 最简项目结构 |
| uni-ui 项目 | 包含官方 uni UI 组件库（推荐） |
| hello uni-app | 展示框架组件、接口和模板的示例项目 |
- 不勾选"启用云开发"（按需选择）
- 点击"创建"
注意：创建的项目默认不包含 components 目录。如果需要使用 easycom 规范，需要手动创建该目录。
配置微信开发者工具
前置条件
- 安装 微信开发者工具 并扫码登录
- 打开微信开发者工具的 设置 -> 安全，开启"服务端口"
配置路径
在 HBuilderX 中配置微信开发者工具的安装路径：
- 打开 HBuilderX -> 偏好设置（macOS:
Command + ,，Windows:Ctrl + ,） - 找到 运行配置 -> 小程序运行配置
- 点击"浏览"，选择微信开发者工具的安装路径
| 平台 | 默认安装路径 |
|---|---|
| macOS | /Applications/wechatwebdevtools.app |
| Windows | C:\Program Files (x86)\Tencent\微信web开发者工具 |
运行项目
有两种运行方式：
方式一：使用快捷键（菜单栏显示）
方式二：点击菜单 运行 -> 运行到小程序模拟器 -> 微信开发者工具
编译完成后，HBuilderX 会自动打开微信开发者工具并运行项目。
常见问题排查
1. Cannot read property forceUpdate 错误
原因：未配置 AppID。
解决：打开项目中的 manifest.json，在微信小程序配置中填入 AppID（可从微信公众平台的"开发管理 -> 开发设置"中获取）。
2. sitemap 未配置警告
原因：项目未关闭 sitemap 检查。
解决：打开 manifest.json 的源码视图，在微信配置部分添加：
{
"mp-weixin": {
"setting": {
"checkSiteMap": false
}
}
}
json
配置总结
配置步骤：
├── 1. 下载安装 HBuilderX
├── 2. 新建 uni-app 项目
├── 3. 下载安装微信开发者工具并登录
├── 4. 微信开发者工具：开启安全端口
├── 5. HBuilderX：配置微信开发者工具路径
├── 6. manifest.json：配置 AppID
└── 7. 运行 -> 运行到小程序模拟器 -> 微信开发者工具
text
参考资源
- uni-app 快速上手 - 官方教程
- 微信开发者工具下载 - 官方下载
↑